<template>
  <div class="tabbar_page">
    <ul>
      <li>
        <router-link to="/index">
            <div class="icon_box"></div>
            <p>首页</p>
        </router-link>
      </li>
      <li>
        <router-link to="/product">
            <div class="icon_box"></div> 
            <p>商品</p>
        </router-link>
      </li>
      <li>
        <router-link to="/loan">
            <div class="icon_box"></div>  
            <p>助贷中心</p>
        </router-link>
      </li>
      <li>
        <router-link to="/personal">
            <div class="icon_box"></div>  
            <p>个人中心</p>
        </router-link>
      </li>
    </ul>
  </div>

</template>

<script>
  

</script>

<style lang="less">
  .tabbar_page{
    width:100%;
    height: 1.333333rem;
    position: fixed;
    left: 0;bottom: 0;right: 0;
    z-index: 10;
    border-top: 1px solid #ccc;
    background-color:#fff;
    ul {
    display: flex;justify-content: center;align-items: center;
      li{
        width: 25%;height:1.333333rem;
          p{
            text-align: center;font-size:0.32rem;
          }
          .icon_box{
            width:0.666667rem;height:0.666667rem;background-color:#ccc;
          }
          a{display:flex;justify-content:center;align-items:center;flex-direction: column;padding-top: 0.133333rem;}
      }
    }
  }
  .router-link-active{
    p{color: red;}
  }
  .router-link-active>.icon_box{background-color:red !important;}
  
  
</style>